<template>
  <el-card class="energy-view">
    <header>
      <div class="h1-icon">
        <svg-icon
          icon-class="chartsIcon"
          style="fill: #fff; font-size: 20px"
        ></svg-icon>
      </div>
      <div>
        <div>会议室暖气设备 - 能耗分析</div>
        <div class="header-deviceId">设备ID:DEVICE-001</div>
      </div>
    </header>
    <h1>关键信息统计</h1>
    <KeyInformation></KeyInformation>
    <TemperatureAnalysis></TemperatureAnalysis>
    <ElectricAnalysis></ElectricAnalysis>
    <HeatingDurationAnalysis></HeatingDurationAnalysis>
    <ParameterElectricAnalysis></ParameterElectricAnalysis>
    <PeakAnalysis></PeakAnalysis>
  </el-card>
</template>
<script>
import KeyInformation from "./Energy/KeyInformation.vue";
import TemperatureAnalysis from "./Energy/TemperatureAnalysis.vue";
import ElectricAnalysis from "./Energy/ElectricAnalysis.vue";
import HeatingDurationAnalysis from "./Energy/HeatingDurationAnalysis.vue";
import ParameterElectricAnalysis from "./Energy/ParameterElectricAnalysis.vue";
import PeakAnalysis from "./Energy/PeakAnalysis.vue";
export default {
  name: "EnergyView",
  components: {
    KeyInformation,
    TemperatureAnalysis,
    ElectricAnalysis,
    HeatingDurationAnalysis,
    ParameterElectricAnalysis,
    PeakAnalysis
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.energy-view {
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: auto;
  h1 {
    margin: 30px 0 10px 0;
    font-size: 18px;
    font-weight: 900;
  }
}
header {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  .h1-icon {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin-right: 10px;
  }
  .header-deviceId {
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5;
  }
}
</style>
